import classs from './Todolist.module.scss'
import { useContext, useState } from 'react'
import ContextTodo, { state } from './todoContext'
const List = () => {
  const Context = useContext(ContextTodo)
  const [list, setList] = useState(state)
  console.log(list);
  
  const del = (index) => {
    Context.todoList.splice(index, 1)
    let listArr = list
    setList({
      list: listArr
    })

  }
  return (
    <div className={classs.List}>
      <table width={300} align='center'>
        <thead>
          <tr>
            <th>日期</th>
            <th>标题</th>
            <th>优先级</th>
          </tr>
        </thead>
        <tbody>
          {Context.todoList.length > 0 ? Context.todoList.map((item, index) => {
            return (
              <tr align='center' key={index}>
                <td>
                  {item.date}
                </td>
                <td>
                  {item.title}
                </td>
                <td className={[item.priority === '1' ? classs.priority1 : '' || item.priority === '2' ? classs.priority2 : '' || item.priority === '3' ? classs.priority3 : '']}>
                  {item.priority}
                </td>
                <td>
                </td>
                <td>
                  <button onClick={() => del(index)}>删除</button>
                </td>
              </tr>
            )
          }) : <tr><td colSpan="4" align='center'>暂无数据</td></tr>}
        </tbody>
      </table>
    </div>
  );
}

export default List;